Web Development Custom Form Validators তৈরি গাইড ও নোট

Riot.js-এ Custom Form Validators তৈরি করা একটি সাধারণ প্রক্রিয়া, যা আপনার ফর্মের ইনপুট ডেটা যাচাই (validation) করার জন্য প্রয়োজনীয়। Riot.js এর state এবং opts ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ ফর্ম তৈরি করতে পারেন এবং কাস্টম ভ্যালিডেশন যুক্ত করতে পারেন।

কাস্টম ফর্ম ভ্যালিডেটর তৈরি করার জন্য কয়েকটি ধাপ:

1. ফর্ম ইনপুট এলিমেন্ট তৈরি করা
2. ইনপুট ডেটার জন্য কাস্টম ভ্যালিডেশন ফাংশন তৈরি করা
3. ভ্যালিডেশন স্টেট ট্র্যাক করা
4. ফর্ম সাবমিটে ভ্যালিডেশন চেক করা

উদাহরণ: একটি সিম্পল কাস্টম ফর্ম ভ্যালিডেটর তৈরি

ধরা যাক, আমরা একটি ফর্ম তৈরি করতে যাচ্ছি যেখানে ইউজার একটি ইমেইল এবং পাসওয়ার্ড ইনপুট করবে, এবং আমরা কাস্টম ভ্যালিডেশন করতে চাই।

১. Parent Component (App.riot)

<!-- src/components/App.riot -->
<app>
  <h1>Sign Up Form</h1>

  <!-- Child Component-এ ডেটা পাঠানো হচ্ছে -->
  <sign-up-form></sign-up-form>

  <script>
    import './SignUpForm.riot';

    export default {}
  </script>
</app>

এখানে, আমরা একটি SignUpForm নামক ফর্ম কম্পোনেন্ট তৈরি করেছি, যা পাসওয়ার্ড এবং ইমেইল ইনপুট নিয়ে কাস্টম ভ্যালিডেশন করবে।

২. Child Component (SignUpForm.riot)

<!-- src/components/SignUpForm.riot -->
<sign-up-form>
  <form onsubmit={validateForm}>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" value={email} onchange={updateEmail} />
    <span if={emailError} class="error">{emailError}</span>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" value={password} onchange={updatePassword} />
    <span if={passwordError} class="error">{passwordError}</span>

    <button type="submit" disabled={isFormInvalid}>Submit</button>
  </form>

  <script>
    export default {
      onMounted() {
        // Initial form values and errors
        this.email = '';
        this.password = '';
        this.emailError = '';
        this.passwordError = '';
        this.isFormInvalid = true; // Disable submit button initially
      },

      updateEmail(e) {
        this.email = e.target.value;
        this.validateEmail();
        this.checkFormValidity();
      },

      updatePassword(e) {
        this.password = e.target.value;
        this.validatePassword();
        this.checkFormValidity();
      },

      validateEmail() {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!this.email) {
          this.emailError = 'Email is required';
        } else if (!emailRegex.test(this.email)) {
          this.emailError = 'Please enter a valid email address';
        } else {
          this.emailError = ''; // Clear error
        }
      },

      validatePassword() {
        if (!this.password) {
          this.passwordError = 'Password is required';
        } else if (this.password.length < 6) {
          this.passwordError = 'Password must be at least 6 characters';
        } else {
          this.passwordError = ''; // Clear error
        }
      },

      checkFormValidity() {
        this.isFormInvalid = this.emailError || this.passwordError || !this.email || !this.password;
      },

      validateForm(e) {
        e.preventDefault(); // Prevent form submission if invalid
        if (!this.isFormInvalid) {
          alert('Form submitted successfully!');
        }
      }
    }
  </script>

  <style>
    .error {
      color: red;
    }
  </style>
</sign-up-form>

ব্যাখ্যা:

1. State initialization:
   • email, password হল ফর্ম ইনপুটের মান।
   • emailError, passwordError হল ইনপুটের জন্য কাস্টম ত্রুটি বার্তা।
   • isFormInvalid একটি ফ্ল্যাগ যা সাবমিট বাটনটি সক্রিয় বা নিষ্ক্রিয় করার জন্য ব্যবহৃত হয়।
2. Form Validation:
   • validateEmail() ফাংশনটি ইমেইল ভ্যালিডেশন করে। এটি একটি সাধারণ RegEx ব্যবহার করে ইমেইল ঠিকভাবে ইনপুট হয়েছে কিনা চেক করে।
   • validatePassword() ফাংশনটি পাসওয়ার্ডের জন্য কাস্টম ভ্যালিডেশন করে, যেমন পাসওয়ার্ড কমপক্ষে ৬টি অক্ষর হতে হবে।
3. Dynamic Error Display:
   • emailError এবং passwordError টেক্সট ফিল্ডের নিচে শর্তসাপেক্ষে ত্রুটি বার্তা দেখায়।
   • <span if={emailError} class="error">{emailError}</span> এই অংশটি দেখাবে শুধুমাত্র যদি emailError ত্রুটি বার্তা থাকে।
4. Form Submission:
   • validateForm() ফাংশনটি সাবমিট ইভেন্টকে আটকে দেয় যদি ফর্মটি ভ্যালিড না হয়।
   • যদি সব ইনপুট ঠিক থাকে, তবে ফর্ম সফলভাবে সাবমিট হবে।
5. Enable/Disable Submit Button:
   • isFormInvalid ভ্যালু অনুযায়ী সাবমিট বাটনটি সক্রিয় বা নিষ্ক্রিয় হয়। যদি কোন ইনপুট ভুল থাকে বা পূর্ণ না হয়, তাহলে বাটনটি নিষ্ক্রিয় থাকবে।

৩. স্টাইলিং (CSS)

<style>
  .error {
    color: red;
  }
  input {
    margin-bottom: 10px;
  }
</style>

এখানে, ত্রুটি বার্তাগুলো লাল রঙে দেখানো হচ্ছে, এবং ইনপুট ফিল্ডগুলোর মধ্যে কিছু মার্জিন দেওয়া হয়েছে যাতে ফর্মটি আরও পরিষ্কার দেখা যায়।

সারাংশ:

• Custom Validators তৈরি করার জন্য আপনি কাস্টম ফাংশন ব্যবহার করে ইনপুট ডেটা যাচাই করতে পারেন।
• Riot.js এর state এবং props ব্যবহার করে ডেটা ট্র্যাক করা যায় এবং conditional rendering এর মাধ্যমে ত্রুটি বার্তা প্রদর্শন করা হয়।
• ফর্ম সাবমিটের সময় preventDefault() ব্যবহার করে ডিফল্ট সাবমিশন বন্ধ করতে হয়, এবং কাস্টম ভ্যালিডেশন চেক করা হয়।

এভাবে আপনি Riot.js-এ সহজেই কাস্টম ফর্ম ভ্যালিডেটর তৈরি করতে পারবেন।